<template>
  <section class="meitu-wrap">
    <!-- 骨架屏 -->
    <vue-skeleton :row="6" :loading="loading"/>

    <!--列表-->
    <van-pull-refresh v-model="listLoading" @refresh="refreshList">
      <van-list :finished="listFinished" finished-text="这些还不够你看吗 =-= " @load="loadMoreList">
        <div class="img-content-wrap" v-for="(item, index) in meituData" :key="index">
          <p class="img">
            <img v-lazy="item.img" alt="" @click="previewMeitu(item.img)">
            <span class="create-img-time">{{item.time}}</span>
          </p>
        </div>
      </van-list>
    </van-pull-refresh>

    <!--按页码查询-->
    <div :class="['filter-page-num flex',{'active':isShowAllFilter}]">
      <van-icon name="exchange" size="20px" class="filter-icon" @click="showAllFilter"/>
      <span class="filter-span" @click="changeFilter">{{isRandom?'随机推荐':'页码查询'}}</span>
    </div>

    <to-top :isShowTop="isShowTop"/>

    <!-- 页面底部导航 -->
    <tabbar-com tabbar-name="meitu"/>
  </section>
</template>

<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";
  import {List} from "vant";
  import {PullRefresh} from "vant";
  import {Icon} from "vant";
  import TabbarCom from "@/components/tabbar.vue";
  import toTop from "@/components/toTop.vue";

  // 图片懒加载
  import {Lazyload} from "vant";

  Vue.use(Lazyload, {});

  // 图片预览
  import {ImagePreview} from "vant";

  Vue.use(ImagePreview);

  @Component({
    components: {
      [List.name]: List,
      [Icon.name]: Icon,
      [PullRefresh.name]: PullRefresh,
      TabbarCom,
      toTop
    }
  })
  export default class Meitu extends Vue {
    private loading: boolean = true; // 页面加载中

    private isShowTop: boolean = false; // 回顶部

    private meituData: number[] = [];
    private listLoading: boolean = false; // 列表数据是否加载中
    private listFinished: boolean = false; // 列表数据是否全部加载完

    private pageSize: number = 20; // 每页数量
    private pageNum: number = 0;//  页码

    private isShowAllFilter: boolean = false;//  是否显示完整筛选条
    private isRandom: boolean = true;//  是否随机推荐，否则就是按照页码一页一页查看

    async mounted() {
      this.loading = true;
      this.meituData = await this.getMeituData();
      this.loading = false;

      // 监听页面滚动距离
      window.addEventListener("scroll", () => {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        this.isShowTop = scrollTop > 800;
      });

    }

    // 请求
    getMeituData(params?: object = {}) {
      return new Promise((resolve, reject) => {
        this.isRandom ? this.pageNum = 0 : this.pageNum += 1; // 非随机推荐情况下，页码自动加一
        this.$api.get("/getImages", {page: this.pageNum, count: this.pageSize}, "baseUrl2")
          .then((res: object[]) => {
            if (res && res.length) {
              resolve(res);
            }
          })
          .catch(e => {
            this.$toast(e.msg);
            reject(e);
          })
          .finally(() => {
            this.listLoading = false;
          });
      });
    }

    // 上拉加载更多
    async loadMoreList() {
      this.listLoading = true;
      const list = await this.getMeituData();
      this.meituData = this.meituData.concat(list);
    }

    // 下拉刷新
    async refreshList() {
      this.pageNum = 0;
      this.listLoading = true;
      this.meituData = await this.getMeituData();
    }

    // 图片预览方法
    previewMeitu(src) {
      ImagePreview([src]);
    }

    //展示筛选条
    showAllFilter() {
      this.isShowAllFilter = !this.isShowAllFilter;
    }

    // 切换筛选条件
    changeFilter() {
      this.isRandom = !this.isRandom;
      this.isShowAllFilter = !this.isShowAllFilter;
      let recommendTip = this.isRandom ? "随机为您推荐美图哦~" : "按页码查询美图哦~";
      this.$toast({
        message: recommendTip,
        position: "bottom"
      });
      this.refreshList();
    }

  }
</script>

<style lang="scss">
  .meitu-wrap {
    padding: 0 16px 50px 16px;
    .img-content-wrap {
      padding: 16px 0;
      .img {
        min-height: 50px;
        border-radius: 5px;
        position: relative;
        img {
          width: 100%;
          border-radius: 5px;
        }
        .create-img-time {
          display: block;
          width: 100%;
          padding: 6px 0 8px 10px;
          font-size: 12px;
          color: #d4d4d4;
          position: absolute;
          left: 0;
          bottom: 0;
          background: rgba(0, 0, 0, .4);
        }
      }
    }
    .filter-page-num {
      padding: 6px 10px;
      position: fixed;
      right: 0;
      bottom: 150px;
      background: orange;
      color: #fff;
      border-bottom-left-radius: 14px;
      border-top-left-radius: 14px;
      transform: translateX(63%);
      box-shadow: 0 0 6px 2px rgba(0, 0, 0, .15);
      transition: all 200ms;
      &.active {
        transform: translateX(0);
      }
      .filter-icon {
        padding: 0 6px 0 3px;
      }
      .filter-span {
        font-size: 14px;
      }
    }
  }
</style>

